﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link rel="Shortcut Icon" href="logo.ico"  />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<script>
	//跳转到该商品的分类
	function productShow(sort) {
		var newSort=sort;
		location.href="product?sort="+newSort;
	};
	$(
			function() {
				$('a[href*=#],area[href*=#]')
						.click(
								function() {
									if (location.pathname.replace(/^\//, '') == this.pathname
											.replace(/^\//, '')
											&& location.hostname == this.hostname) {
										var $target = $(this.hash);
										$target = $target.length
												&& $target
												|| $('[name='
														+ this.hash.slice(1)
														+ ']');
										if ($target.length) {
											var targetOffset = $target.offset().top;
											$('html,body,.div1').animate({
												scrollTop : targetOffset
											}, 1000);
											return false;
										}
									}
								});
			})
</script>
</head>
<body class="index">
	<div class="top_ad">
		<div class="w1200">
			<a href="#" id="close"></a>
		</div>
	</div>

	<div class="top">
		<div class="w1200">
			<div class="left">
				您好，欢迎光临易易城！<a href="#">[登录]</a> <a href="#">[注册]</a>
			</div>
			<div class="right">
				<a href="#">我的会员中心</a>|<a href="#">收藏夹</a>|<a href="#">服务中心</a>|<a
					href="#">在线客服</a>|<a href="#">购物车<!-- <b>0</b>件 -->
				</a>
			</div>
			<div class="clear"></div>
		</div>
	</div>

	<div class="head">
		<div class="w1200">
			<div class="logo">
				<a href="#"></a>
			</div>
			<div class="search">
				<form action="#" class="form">
					<input type="text" value="输入商品关键字" name="keyword" class="txt"
						onfocus="if(value=='输入商品关键字') {value=''}"
						onblur="if(value=='') {value='输入商品关键字'}" /> <input type="submit"
						value="搜索" class="sub" />
				</form>
				<p>
					<a href="#">iphone6s</a>|<a href="#">面膜</a>|<a href="#">婚庆床品</a>|<a
						href="#">运动鞋</a>|<a href="#">眼霜</a>|<a href="#">月饼</a>|<a href="#">智能手机</a>|<a
						href="#">连衣裙</a>
				</p>
			</div>
			<div class="s_r">
				<dl>
					<dt>
						<p>
							购物车<!-- <span>0</span> -->
						</p>
					</dt>
					<dd>
						客服电话：<b>400-0139-038</b>
					</dd>
				</dl>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<!-- 获取数据库的分类 -->
	<c:choose>
		<c:when test='${empty sessionScope.indexFirstTitle}'>
			<jsp:forward page='/index'></jsp:forward>
		</c:when>
	</c:choose>
	<div class="menu">
		<div class="w1200">
			<div class="item" id="nav">
				<!-- 获取数据库的分类 -->
				<a href="#" class="nav">全部商品分类</a>
				<div class="nav_son">
					<ul>
						<c:forEach var="firstTitle"
							items="${sessionScope.indexFirstTitle}" varStatus="status">
							<c:choose>
								<c:when test="${firstTitle.id<10}">
									<li class="li0${firstTitle.id}"><a href="product.jsp">${firstTitle.name}</a></li>
								</c:when>
								<c:otherwise>
									<li class="li${firstTitle.id}"><a href="#">${firstTitle.name}</a></li>
								</c:otherwise>
							</c:choose>
						</c:forEach>						
					</ul>
					<!-- 每一个<div class="hover">代表一个二级菜单 -->
					<div class="hover">
						<div id="son">
							<dl>
								<dd>
									<c:forEach var="power" items="${sessionScope.power}"
										varStatus="status">
										<a href="#">${power.name}</a>
									</c:forEach>
								</dd>
								<div class="clear"></div>
							</dl>
						</div>

						<div id="son">
							<dl>
								<dd>
									<c:forEach var="clothes" items="${sessionScope.clothes}"
										varStatus="status">
										<a href="#">${clothes.name}</a>
									</c:forEach>
								</dd>
								<div class="clear"></div>
							</dl>
						</div>
						<div id="son">
							<dl>
								<dd>
									<c:forEach var="beauty" items="${sessionScope.beauty}"
										varStatus="status">
										<a href="#">${beauty.name}</a>
									</c:forEach>
								</dd>
								<div class="clear"></div>
							</dl>
						</div>

						<div id="son">
							<dl>
								<dd>
									<c:forEach var="gold" items="${sessionScope.gold}"
										varStatus="status">
										<a href="#">${gold.name}</a>
									</c:forEach>
								</dd>
								<div class="clear"></div>
							</dl>
						</div>

						<div id="son">
							<dl>
								<dd>
									<c:forEach var="home" items="${sessionScope.home}"
										varStatus="status">
										<a href="#">${home.name}</a>
									</c:forEach>
								</dd>
								<div class="clear"></div>
							</dl>
						</div>

						<div id="son">
							<dl>
								<dd>
									<c:forEach var="tea" items="${sessionScope.tea}"
										varStatus="status">
										<a href="#">${tea.name}</a>
									</c:forEach>
								</dd>
								<div class="clear"></div>
							</dl>
						</div>

						<div id="son">
							<dl>
								<dd>
									<c:forEach var="sport" items="${sessionScope.sport}"
										varStatus="status">
										<a href="#">${sport.name}</a>
									</c:forEach>
								</dd>
								<div class="clear"></div>
							</dl>
						</div>

						<div id="son">
							<dl>
								<dd>
									<c:forEach var="furniture" items="${sessionScope.furniture}"
										varStatus="status">
										<a href="#">${furniture.name}</a>
									</c:forEach>
								</dd>
								<div class="clear"></div>
							</dl>
						</div>

						<div id="son">
							<dl>
								<dd>
									<c:forEach var="life" items="${sessionScope.life}"
										varStatus="status">
										<a href="#">${life.name}</a>
									</c:forEach>
								</dd>
								<div class="clear"></div>
							</dl>
						</div>

						<div id="son">
							<dl>
								<dd>
									<c:forEach var="other" items="${sessionScope.other}"
										varStatus="status">
										<a href="#">${other.name}</a>
									</c:forEach>
								</dd>
								<div class="clear"></div>
							</dl>
						</div>
					</div>
				</div>


			</div>
		</div>
		<div class="item">
			<a href="#" class="home">商城首页</a>
		</div>
		<div class="item">
			<a href="#con1">易易特色</a>
		</div>
		<div class="item">
			<a href="#con2">热销产品</a>
		</div>
		<div class="item">
			<a href="#con3">新品上市</a>
		</div>
		<div class="item">
			<a href="#con4">精品推荐</a>
		</div>
		<div class="item">
			<a href="#con5">生活服务</a>
		</div>
	</div>
	</div>

	<script type="text/javascript">
		$(document).ready(
				function(e) {

					$('#slider li').eq(0).show();
					var lenThumb = $('#slider li').length;
					for (var i = 1; i <= lenThumb; i++) {
						$('#num').append('<span>' + i + '</span>');
					}
					$('#num span').eq(0).addClass('on');
					var len = $('#num span').length;
					var index = 0;

					$('#num span').click(function() {
						index = $('#num span').index(this);
						picShow(index);
					});
					var playPic = setInterval(function() {
						picShow(index);
						index++;
						if (index == len) {
							index = 0
						}
					}, 3000);
					function picShow(i) {
						$('#slider li').eq(i).stop(true, true).fadeIn()
								.siblings().fadeOut();
						$('#num > span').eq(i).addClass('on').siblings()
								.removeClass('on');
					}

				});
	</script>
	<div class="banner">
		<ul id="slider">
			<li style="background:url(images/home/banner.jpg) no-repeat center;"><a
				href="#"></a></li>
			<li style="background:url(images/home/1.jpg)  center;"><a
				href="#"></a></li>
			<li style="background:url(images/home/2.jpg)  center;"><a
				href="#"></a></li>
		</ul>
		<!--no-repeat-->

		<div class="w_auto">
			<div class="clearfix"></div>
			<div id="num" class="point"></div>
		</div>
	</div>

	<div class="w1201">
		<a name="a01"></a>
		<div class="idx01">
			<div class="rollBox">
				<dl>
					<dt>
						<b>限时抢购</b><span>让生活精彩不停</span>
						<p>
							<img onMouseDown="ISL_GoDown()" onMouseUp="ISL_StopDown()"
								onMouseOut="ISL_StopDown()" class="img1"
								src="images/home/ico13.jpg" width="23" height="23" /> <img
								onmousedown="ISL_GoUp()" onMouseUp="ISL_StopUp()"
								onMouseOut="ISL_StopUp()" class="img2"
								src="images/home/ico14.jpg" width="23" height="23" />
						</p>
					</dt>
					<dd>
						<div class="Cont" id="ISL_Cont">
							<div class="ScrCont">
								<div id="List1">
									<!-- 图片列表 begin -->
									<ul>
									 <c:forEach var="product" items="${sessionScope.products}" varStatus="status">
										<li class="pic">
											<p class="p01">${product.description}</p>
											<p class="p02">
												<font>￥</font><b>${product.salePrice}</b><br /><span>买一送一<br />${product.description}:${product.country}
												</span>
												 
												 <a href="show?id=${product.id}" class="buy">立即抢购 ></a>
											</p> <img src="addPicture/${product.picture}" style="width: 200px;height: 200px"/>
										</li>
										</c:forEach> 								
									</ul>

									<!-- 图片列表 end -->
								</div>
								<!-- <div id="List2"></div> -->
							</div>
						</div>
					</dd>
				</dl>
			</div>
		</div>

		<div class="idx_ad">
			<img src="images/home/ico39.jpg" />
		</div>
		<a name="a02"></a>
		<div class="idx02">
			<dl>
				<dt id="con1">易易特色</dt>
				<dd>
					<div class="item big" onclick="productShow(${feature[0].sort})">
						<a href="#" class="title">${sessionScope.feature[0].description}</a>
						<p>
							<font>￥</font>${sessionScope.feature[0].salePrice}.<font>00</font>
						</p>
						<a href="#" class="buy"></a> <img src="addPicture/${sessionScope.feature[0].picture}" />
					</div>
					<c:forEach var="feature" items="${sessionScope.feature}" varStatus="status">
						<c:choose>
						<c:when test="${status.index==0 }"></c:when>
						<c:otherwise>
						<div class="item" onclick="productShow(${feature.sort})">
						<a href="#" class="title">${feature.description}</a>
						<p>
							<font>￥</font>${feature.salePrice}.<font>00</font>
						</p>
						<a href="#" class="buy"></a> <img src="addPicture/${feature.picture}" />
					</div>
					</c:otherwise>
					</c:choose>
					</c:forEach>
					<div class="clear"></div>
				</dd>
			</dl>
		</div> 
		<a name="a03"></a>
		   <div class="idx02" id="idx03">
			<dl>
				<dt id="con3">新品上市</dt>
				<dd>
					<div class="item big" onclick="productShow(${newProduct[0].sort})">
						<a href="#"><img src="addPicture/${newProduct[0].picture}" /></a>
					</div>
					<c:forEach var="newProduct" items="${sessionScope.newProduct}" varStatus="status">
						<c:choose>
						<c:when test="${status.index==0 }"></c:when>
						<c:otherwise>
						<div class="item" onclick="productShow(${newProduct.sort})">
						<a href="#" class="title">${newProduct.description}</a>
						<p>
							<font>￥</font>${newProduct.salePrice}.<font>00</font>
						</p>
						<a href="#" class="buy"></a> <img src="addPicture/${newProduct.picture}" />
					</div>
					</c:otherwise>
					</c:choose>
					</c:forEach>
					<div class="clear"></div>
				</dd>
			</dl>
		</div>

		<div class="idx_ad">
			<img src="images/home/ico28.jpg" />
		</div>
		<a name="a04"></a>
		<div class="idx02" id="idx04">
			<dl>
				<dt id="con2">热销产品</dt>
				<dd>
					<div class="item big" onclick="productShow(${hotSale[0].sort})">
						<a href="#" class="title">${sessionScope.hotSale[0].description}</a>
						<p>
							<font>￥</font>${sessionScope.hotSale[0].salePrice}.<font>00</font>
						</p>
						<a href="#" class="buy"></a> <img src="addPicture/${hotSale[0].picture}" />
					</div>
					<c:forEach var="hotSale" items="${sessionScope.hotSale}" varStatus="status">
						<c:choose>
						<c:when test="${status.index==0 }"></c:when>
						<c:otherwise>
						<div class="item" onclick="productShow(${hotSale.sort})">
						<a href="#" class="title">${hotSale.description}</a>
						<p>
							<font>￥</font>${hotSale.salePrice}.<font>00</font>
						</p>
						<a href="#" class="buy"></a> <img src="addPicture/${hotSale.picture}" />
					</div>
					</c:otherwise>
					</c:choose>
					</c:forEach>
					<div class="clear"></div>
				</dd>
			</dl>
		</div>
		<a name="a05"></a>
		<div class="idx02" id="idx05">
			<dl>
				<dt id="con4">精品推荐</dt>
				<dd>
					<div class="item big" onclick="productShow(${goodRecommend[0].sort})">
						<a href="#"><img src="addPicture/${goodRecommend[0].picture}" /></a>
					</div>
					<c:forEach var="goodRecommend" items="${sessionScope.goodRecommend}" varStatus="status">
						<c:choose>
						<c:when test="${status.index==0 }"></c:when>
						<c:otherwise>
						<div class="item" onclick="productShow(${goodRecommend.sort})">
						<a href="#" class="title">${goodRecommend.description}</a>
						<p>
							<font>￥</font>${goodRecommend.salePrice}.<font>00</font>
						</p>
						<a href="#" class="buy"></a> <img src="addPicture/${goodRecommend.picture}" />
					</div>
					</c:otherwise>
					</c:choose>
					</c:forEach>
					<div class="clear"></div>
				</dd>
			</dl>
		</div>
		<a name="a06"></a>
		<div class="idx02" id="idx06">
			<dl>
				<dt id="con5">生活服务</dt>
				<dd>
					<div class="item big" onclick="productShow(${lifeService[0].sort})">
						<a href="#" class="title">${lifeService[0].description}</a>
						<p>
							<font>￥</font>${lifeService[0].salePrice}.<font>00</font>
						</p>
						<a href="#" class="buy"></a> <img src="addPicture/${lifeService[0].picture}" />
					</div>
					<c:forEach var="lifeService" items="${lifeService}" varStatus="status">
						<c:choose>
						<c:when test="${status.index==0 }"></c:when>
						<c:otherwise>
						<div class="item" onclick="productShow(${lifeService.sort})">
						<a href="#" class="title">${lifeService.description}</a>
						<p>
							<font>￥</font>${lifeService.salePrice}.<font>00</font>
						</p>
						<a href="#" class="buy"></a> <img src="addPicture/${lifeService.picture}" />
					</div>
					</c:otherwise>
					</c:choose>
					</c:forEach> 
					<div class="clear"></div>
				</dd>
			</dl>
		</div>

		<div class="idx_ad">
			<img src="images/home/ico28.jpg" />
		</div>
	</div> 

	<!--footer-->
	<div class="footer">
		<div class="f_bz">
			<div class="w1200">
				<dl class="dl01">
					<dt>正品保证</dt>
					<dd>正品护航 购物无忧</dd>
				</dl>
				<dl class="dl02">
					<dt>你消费 我买单</dt>
					<dd>返现购物商城</dd>
				</dl>
				<dl class="dl03">
					<dt>品类丰富</dt>
					<dd>品类齐全 轻松购物</dd>
				</dl>
				<dl class="dl04">
					<dt>特色服务体验</dt>
					<dd>为您呈现不一样的服务</dd>
				</dl>
				<div class="clear"></div>
			</div>
		</div>
		<div class="f_nav">
			<div class="w1200">
				<dl>
					<dt>新手指南</dt>
					<dd>
						<a href="#">注册新用户</a> <a href="#">商品订购流程</a> <a href="#">会员注册协议</a>
					</dd>
				</dl>
				<dl>
					<dt>付款方式</dt>
					<dd>
						<a href="#">支付宝支付</a> <a href="#">网上银行支付</a> <a href="#">货到付款</a>
					</dd>
				</dl>
				<dl>
					<dt>常见问题</dt>
					<dd>
						<a href="#">订单状态</a> <a href="#">发票说明</a>
					</dd>
				</dl>
				<dl>
					<dt>售后服务</dt>
					<dd>
						<a href="#">退换货政策</a> <a href="#">退换货流程</a> <a href="#">退款说明</a> <a
							href="#">退换货申请</a>
					</dd>
				</dl>
				<dl>
					<dt>客服中心</dt>
					<dd>
						<a href="#">常见问题</a> <a href="#">联系客服</a> <a href="#">投诉与建议</a>
					</dd>
				</dl>
				<div class="ewm">
					<img src="images/home/ico35.png" />
				</div>
				<div class="ewm">
					<img src="images/home/ico38.png" />
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="w1200">
			<div class="bottom">
				<a href="#">关于我们</a>|<a href="#">帮助中心</a>|<a href="#">法律声明</a>|<a
					href="#">用户协议</a>|<a href="#">联系我们</a>|<a href="#">人才招聘</a>|<a
					href="#">站点地图</a>

				<p>
					网络文化经营许可证：粤网文[2015]0295-065号<br />© 2015 深圳易易城科技网络有限公司.
					粤ICP备15042543号
				</p>
				<p class="p02">
					<img src="images/home/ico25.jpg" /><img
						src="images/home/ico26.jpg" /><img src="images/home/ico27.jpg" /><img
						src="images/home/ico36.jpg" /><img src="images/home/ico37.jpg" />
				</p>
			</div>
		</div>
	</div>
	<!--float_right-->
	<div class="float">
		<ul>
			<li><a href="#" class="a01"></a></li>
			<li><a href="#" class="a02"></a></li>
			<li><a href="#" class="a03"></a></li>
			<li><a href="#" class="a04"></a></li>
		</ul>
	</div>
	<!--float_left-->
	<div class="float2">
		<ul>
			<li><a href="#a01" class="a01 on" id="idx01">限时抢购</a></li>
			<li><a href="#a02" class="a02" id="idx02"></a></li>
			<li><a href="#a03" class="a03" id="idx03"></a></li>
			<li><a href="#a04" class="a04" id="idx04"></a></li>
			<li><a href="#a05" class="a05" id="idx05"></a></li>
			<li><a href="#a06" class="a06" id="idx06"></a></li>
		</ul>
	</div>
	<script language="javascript" type="text/javascript">
		$(function() {
			var dv = $(".idx01").offset().top;
			var dv2 = $(".idx02").offset().top;
			var dv3 = $("#idx03").offset().top;
			var dv4 = $("#idx04").offset().top;
			var dv5 = $("#idx05").offset().top;
			var dv6 = $("#idx06").offset().top;
			window.onscroll = function() {
				if (dv < document.body.scrollTop) {
					$(".float2 a").removeClass("on");
					$(".float2 .a01").addClass("on");

				}
				if (dv2 < document.body.scrollTop) {
					$(".float2 a").removeClass("on");
					$(".float2 .a02").addClass("on");
				}
				if (dv3 < document.body.scrollTop) {
					$(".float2 a").removeClass("on");
					$(".float2 .a03").addClass("on");
				}
				if (dv4 < document.body.scrollTop) {
					$(".float2 a").removeClass("on");
					$(".float2 .a04").addClass("on");
				}
				if (dv5 < document.body.scrollTop) {
					$(".float2 a").removeClass("on");
					$(".float2 .a05").addClass("on");
				}
				if (dv6 < document.body.scrollTop) {
					$(".float2 a").removeClass("on");
					$(".float2 .a06").addClass("on");
				}
			}
		});
	</script>
	<script language="javascript" type="text/javascript">
	<!--//--><![CDATA[//><!--
		//图片滚动列表 mengjia 070816
		var Speed = 10; //速度(毫秒)
		var Space = 10; //每次移动(px)
		var PageWidth = 404; //翻页宽度
		var fill = 0; //整体移位
		var MoveLock = false;
		var MoveTimeObj;
		var Comp = 0;
		var AutoPlayObj = null;
		GetObj("List2").innerHTML = GetObj("List1").innerHTML;
		GetObj('ISL_Cont').scrollLeft = fill;
		GetObj("ISL_Cont").onmouseover = function() {
			clearInterval(AutoPlayObj);
		}
		GetObj("ISL_Cont").onmouseout = function() {
			AutoPlay();
		}
		AutoPlay();
		function GetObj(objName) {
			if (document.getElementById) {
				return eval('document.getElementById("' + objName + '")')
			} else {
				return eval

				('document.all.' + objName)
			}
		}
		function AutoPlay() { //自动滚动
			clearInterval(AutoPlayObj);
			AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();', 5000); //间隔时间
		}
		function ISL_GoUp() { //上翻开始
			if (MoveLock)
				return;
			clearInterval(AutoPlayObj);
			MoveLock = true;
			MoveTimeObj = setInterval('ISL_ScrUp();', Speed);
		}
		function ISL_StopUp() { //上翻停止
			clearInterval(MoveTimeObj);
			if (GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {
				Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
				CompScr();
			} else {
				MoveLock = false;
			}
			AutoPlay();
		}
		function ISL_ScrUp() { //上翻动作
			if (GetObj('ISL_Cont').scrollLeft <= 0) {
				GetObj('ISL_Cont').scrollLeft = GetObj

				('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth
			}
			GetObj('ISL_Cont').scrollLeft -= Space;
		}
		function ISL_GoDown() { //下翻
			clearInterval(MoveTimeObj);
			if (MoveLock)
				return;
			clearInterval(AutoPlayObj);
			MoveLock = true;
			ISL_ScrDown();
			MoveTimeObj = setInterval('ISL_ScrDown()', Speed);
		}
		function ISL_StopDown() { //下翻停止
			clearInterval(MoveTimeObj);
			if (GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {
				Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth
						+ fill;
				CompScr();
			} else {
				MoveLock = false;
			}
			AutoPlay();
		}
		function ISL_ScrDown() { //下翻动作
			if (GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth) {
				GetObj('ISL_Cont').scrollLeft =

				GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;
			}
			GetObj('ISL_Cont').scrollLeft += Space;
		}
		function CompScr() {
			var num;
			if (Comp == 0) {
				MoveLock = false;
				return;
			}
			if (Comp < 0) { //上翻
				if (Comp < -Space) {
					Comp += Space;
					num = Space;
				} else {
					num = -Comp;
					Comp = 0;
				}
				GetObj('ISL_Cont').scrollLeft -= num;
				setTimeout('CompScr()', Speed);
			} else { //下翻
				if (Comp > Space) {
					Comp -= Space;
					num = Space;
				} else {
					num = Comp;
					Comp = 0;
				}
				GetObj('ISL_Cont').scrollLeft += num;
				setTimeout('CompScr()', Speed);
			}
		}
		//--><!]]>
	</script>
</body>
</html>
